<template>
	<div>
		<el-dialog title="编辑导出内容" :visible.sync="exportVisible" :modal-append-to-body="false" width="820px">
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="题目类型">
					<el-select v-model="form.type" placeholder="请选择题型" class="width200 margin-right20">
						<el-option v-for="(type, index) in typeList" :key="index" :label="type.name" :value="type.id"></el-option>
					</el-select>
					<el-select placeholder="请选择属性" class="width200" v-model="form.properType">
						<el-option label="普通题" :value="1"></el-option>
						<el-option label="作废题" :value="2"></el-option>
						<el-option label="争议题" :value="3"></el-option>
						<el-option label="重复题" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题目分类">
					<el-select filterable v-model="form.category3" placeholder="请选择章节分类" multiple class="width200 margin-right20">
						<el-option v-for="point in categoryId3Data" :key="point.id" :label="point.name" :value="point.id"
							:style="{'color': point.color?point.color:''}"></el-option>
					</el-select>
					<el-select filterable v-model="form.category2" placeholder="请选择模块分类" multiple class="width200 margin-right20">
						<el-option v-for="point in categoryId2Data" :key="point.id" :label="point.name"
							:value="point.id"></el-option>
					</el-select>
					<el-select filterable v-model="form.category1" placeholder="请选择综合分类" multiple class="width200 margin-right20">
						<el-option v-for="point in categoryId1Data" :key="point.id" :label="point.name"
							:value="point.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题目标签">
					<el-select v-model="form.labelIds" multiple filterable placeholder="请选择题目标签" class="width100Per">
						<el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="来源显示">
					<el-cascader :props="props" v-model="form.province" :options="areaData" placeholder="请选择地区"
						class="margin-right20 width200">
					</el-cascader>
					<el-date-picker type="years" v-model="form.year" placeholder="选择年份" value-format="yyyy" class="width200">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="正确率">
					<div class="row-me row-center">
						<el-input type="number" class="width200" v-model="form.startRate"></el-input>%<span
							style="width: 80px;height:1px;background-color: #222;margin:0 10px;"></span>
						<el-input type="number" class="width200" v-model="form.endRate"></el-input>%
					</div>
				</el-form-item>
				<el-form-item label="显示起始编号">
					<el-input type="number" v-model="form.startIndex" @input="onInput" class="width200"></el-input>
				</el-form-item>
				<el-form-item label="每页题目数量">
					<el-input type="number" v-model="form.pageSize" class="width200"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="exportQuestionBtn" type="primary">导出试题</el-button>
				<el-button @click="exportVisible=false">取 消</el-button>
			</span>
		</el-dialog>

		<el-dialog title="批量导出结果" :visible.sync="exportQuestion" width="60%" append-to-body @open="disableBodyScroll"
			@close="enableBodyScroll">
			<div v-loading="loading" element-loading-text="题目导出中...  ">
				<div class="row-me row-center font-size16">
					<div class="row-me row-center">
						是否分离 ：
						<el-switch v-model="delivery"></el-switch>
					</div>
					<div class="margin-left30 row-me row-center">
						是否显示来源 ：
						<el-switch v-model="laiyuan"></el-switch>
					</div>
					<div class="margin-left30 row-me row-center margin-right30">
						隐藏解析 ：
						<el-switch v-model="analysis"></el-switch>
					</div>
					<div class="row-me row-center margin-right30" v-if="delivery">
						是否显示正确率 ：
						<el-switch v-model="accurate"></el-switch>
					</div>
					<el-button type="primary" @click="clickRandom">随机</el-button>
				</div>
				<el-button @click="selectAll" class="margin-bottom20 margin-top20">复制全部</el-button>

				<div id="aaa">
					<el-card class="box891016-card margin-bottom10 font-size16" v-for="(question, index) in exportQuestionList"
						:key="index">
						<b>
							<p v-if="laiyuan"
								v-html="((index + form.startIndex*1) + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))+(question.sourceNames?'(来源：'+question.sourceNames+')':'')">
							</p>
							<p v-if="!laiyuan"
								v-html="((index + form.startIndex*1) + '.' + question.title + (question.abbreviation == null ? '' : question.abbreviation))">
							</p>
						</b>
						<b v-if="question.titleImages && !delivery">
							<img style="height: 100px;width: auto;" :src="img" v-for="(img,i) in (question.titleImages)" :key="i+img">
						</b>
						<div v-if="question.type.value == 0 || question.type.value == 1||question.type.value == 2">
							<p v-for="(item, index) in JSON.parse(question.content)">{{ item.title }}. {{ item.content }}</p>
						</div>
						<template v-if="!delivery">
							<div class="row-me margin-top20"
								v-if="question.type.value == 100 || question.type.value == 99||question.type.value == 114">
								<div class="flex1">
									<div v-for="(item,index) in question.clozeList" :key="index"
										class="color252525 flex1 line-height21 margin-bottom10">
										<b>{{item.title||''}}</b>
										<div v-if="item.content" class="margin-top10">
											<div v-for="(val,i) in JSON.parse(item.content)" :key="i">
												{{val.title||''}}、{{val.content||''}}
											</div>
										</div>
										<b class="row-me margin-top10">
											<div style="color:red">答案：<span v-html="item.answer"></span></div>
											<div class="row-me flex1 margin-left10" v-if="!analysis">
												<div v-html="item.textExplain"></div>
											</div>
										</b>
									</div>
								</div>
							</div>
							<b v-else>
								<p style="color:red">答案：<span v-html="question.answer"></span></p>
								<b v-if="!analysis">
									<p>解析：<span v-html="question.textExplain"></span></p>
								</b>
							</b>
						</template>
					</el-card>
					<template v-if="delivery">
						<el-divider></el-divider>
						<el-card class="box-card margin-bottom10" v-for="(question,key) in exportQuestionList" :key="key+question">
							<b>
								<p><span v-html="key + 1 + '.' + question.answer"></span></p>
							</b>
							<b v-if="!analysis">
								<p>解析：<span v-html="question.textExplain"></span></p>
							</b>
							<b v-if="accurate">
								<p>正确率：<span>{{question.accurate||0}}%</span></p>
							</b>
						</el-card>
					</template>
				</div>
			</div>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="form.pageNumber"
					:page-size="form.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'batchExport',
		props: ['categoryId1Data', 'categoryId2Data', 'categoryId3Data', 'typeList', 'tagList', 'isChild'],
		data() {
			return {
				exportQuestion: false,
				loading: false,
				delivery: false,
				laiyuan: false,
				analysis: false,
				accurate: true,
				exportQuestionList: [],
				form: {
					pageNumber: 1,
					pageSize: 30
				},
				props: {
					emitPath: false,
					value: 'id',
					label: 'name',
					checkStrictly: true,
					multiple: true
				},
				exportVisible: false,
				typeData: [],
				areaData: [],
				pageTotal: 0
			}
		},
		mounted() {
			this.getAllArea()
		},
		methods: {
			disableBodyScroll() {
				document.body.style.overflow = 'hidden';
			},
			enableBodyScroll() {
				document.body.style.overflow = '';
			},
			handlePageChange(val) {
				this.loading = true
				this.form.pageNumber = val
				this.form.pageSize = this.form.pageSize ? Number(this.form.pageSize) : 99999
				this.$post(
					`/admin/question/getQuestions?pageSize=${this.form.pageSize||9999}&pageNumber=${this.form.pageNumber||1}&city=${this.form.city}&province=${this.form.province}&showSource=${true}&export=${true}`,
					this.form).then(res => {
					if (res.code == 1000) {
						this.exportQuestionList = res.data.list;
						this.pageTotal = res.data.totalRow;
						this.loading = false
						let arr = []
						for (let item of this.exportQuestionList) {
							if (item.questionSources) {
								arr = Array.from(item.questionSources, ({
									name
								}) => name)
							}
							if (item.examSource) {
								arr = [...arr, item.examSource]
							}
							if (item.showType) {
								this.$set(item, 'sourceNames', arr.toString())
							}
						}
					}
				});
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = res.data
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
			onInput(val) {
				if (!val) {
					this.$message.warning('起始编号只能属于大于零或者等于零!')
					this.form.startIndex = 0
				}
			},
			// 确认批量导出
			exportQuestionBtn() {
				this.loading = true
				this.form.year = this.form.year ? this.form.year.toString() : ''
				this.exportQuestion = true;
				this.form.city = this.form.city ? this.form.city.toString() : ''
				this.form.province = this.form.province ? this.form.province.toString() : ''
				this.form.labelIds = this.form.labelIds ? this.form.labelIds.toString() : ''
				this.form.category1 = this.form.category1 ? this.form.category1.toString() : ''
				this.form.category2 = this.form.category2 ? this.form.category2.toString() : ''
				this.form.category3 = this.form.category3 ? this.form.category3.toString() : ''
				this.form.isChild = this.isChild || false
				this.form.export = true
				this.form.roleType = 1
				this.form.pageNumber = 1
				this.form.pageSize = this.form.pageSize ? Number(this.form.pageSize) : 99999
				this.$post(
					`/admin/question/getQuestions?pageSize=${this.form.pageSize||9999}&pageNumber=${this.form.pageNumber||1}&city=${this.form.city}&province=${this.form.province}&showSource=${true}&export=${true}`,
					this.form).then(res => {
					if (res.code == 1000) {
						this.exportQuestionList = res.data.list;
						this.pageTotal = res.data.totalRow;
						this.loading = false
						let arr = []
						for (let item of this.exportQuestionList) {
							if (item.questionSources) {
								arr = Array.from(item.questionSources, ({
									name
								}) => name)
							}
							if (item.examSource) {
								arr = [...arr, item.examSource]
							}
							if (item.showType) {
								this.$set(item, 'sourceNames', arr.toString())
							}
						}
					}
				});
				this.exportVisible = false
				this.exportQuestion = true;
			},
			show(type = 0, data = []) {
				if (type) {
					this.exportQuestion = true
					this.exportQuestionList = data
					let arr = []
					for (let item of this.exportQuestionList) {
						if (item.questionSources) {
							arr = Array.from(item.questionSources, ({
								name
							}) => name)
							if (item.examSource) {
								arr = [...arr, item.examSource]
							}
							this.$set(item, 'sourceNames', arr.toString())
						}
					}
				} else {
					this.exportVisible = true
				}
				this.form = {}
				this.form.startIndex = 1;
			},
			//复制全部
			selectAll() {
				// 获取selection对象
				var selection = window.getSelection();
				// 清空selection对象
				selection.removeAllRanges();
				// 创建一个Range实例
				var ele = document.getElementById('aaa');
				var range = new Range();
				range.selectNodeContents(ele);
				// selection对象设置range实例
				selection.addRange(range);
				document.execCommand('Copy');
				this.$message.success('已复制到粘贴板');
			},
			//随机打乱试题筛选结果集
			clickRandom() {
				this.exportQuestionList.sort(() => Math.random() - 0.5);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-tree-node__content {
		height: 30px;
	}
</style>